<template>
    <div>
        <div id="toolBarMain">
            <div id="above" class="toolBar">
                <el-input
                    v-model="keyword"
                    style="width: 240px;height: 40px"
                    size="large"
                    prefix-icon="el-icon-search"
                    clearable
                    placeholder="请输入内容"
                />
                <el-button type="primary" plain size="large" @click="selectData" :icon="Search"
                           style="margin-left: 10px">
                    查询
                </el-button>
            </div>
            <el-divider border-style="dashed" />
            <div id="below" class="toolbar">
                <el-button type="danger" plain size="large" @click="deleteData" :icon="Delete">
                    删除
                </el-button>
                <el-button type="success" plain size="large" @click="addData" :icon="Edit">
                    新增
                </el-button>
                <el-button type="info" plain size="large" @click="addData">
                    <template #icon>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-baobiao"></use>
                        </svg>
                    </template>
                    报表
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Delete, Edit, Search } from "@element-plus/icons-vue";
import { ref } from "vue";
// interface Props {
// }
const emits = defineEmits(["select", "add"]);

// const props = withDefaults(defineProps<Props>(), {
// });
const keyword = ref<string | number>();
//查询按钮的点击事件
const selectData = () => {
    //发送查询事件回调,告诉父组件输入框已改变
    emits("select", keyword.value);
};
//删除按钮的点击事件
const deleteData = () => {

};
//新增按钮的点击事件
const addData = () => {
    emits("add");
};
</script>

<style scoped lang="scss">
#toolBarMain {
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column; /* 子元素沿垂直方向排列 */
    justify-content: space-between; /* 如果有多个子元素，它们之间会平均分配剩余空间 */
    //background: #535bf2;
    #above {
        //background: #55a532;
        height: 45%;
    }

    #below {
        //background: red;
        height: 45%;
    }

    .toolBar {
        display: flex;
        //justify-content: space-between;
        //align-items: center;
    }
}
</style>